<template>
	<view class="page">
		<view class="page__header" :style="{'height': tagMode ? '100rpx' : '200rpx'}">
			<view class="page__header-top"> 
				<view class="" @click="selectPrevDate">上一天</view>
				<view class="page__header-top--center" @click="selectDate">
					<view class="">{{title}}-{{datetime}}</view>
					<view class="page__header-top--center-icon">
						<image src="../../../../static/theme/default/home/calendar.png" mode=""></image>
					</view>
				</view>
				<view class="" @click="selectNextDate">下一天</view>
			</view>
			<view class="page__header-bottom" :style="{'height': tagMode ? '0' : '100rpx'}">
				<u-tag v-for="item in tags" :text="item.tags" :bgColor="item.checked ? '#d1d8ee' : '#fff'" size="mini" color="#000" borderColor="#fff" @click="tagFilter(item.tags)"></u-tag>
			</view>
			<view class="tag-change" @click="tagMode = !tagMode">
				<view :class="tagMode ? 'mode-arrow-bottom' : 'mode-arrow-top'">
				</view>
			</view>
		</view>
		<u-overlay :show="calendarVisible" @click="calendarVisible = false" :opacity="0">
			<view class="calendar-box" @tap.stop>
				<zzx-calendar ref="zzx_calendar" :dotList="dotList" :dotStyle="{background: '#3C9CFF'}" @selected-change="changeDate" @days-change="changeMonth"></zzx-calendar>
			</view>
		</u-overlay>
		<view class="page__content" v-if="listCopy.length">
			<view class="page__content--card" v-for="(item,index) in listCopy" :key="item.id">
				<view class="page__content--card-img">
					<image :src="item.img" mode="" @click="previewImg(index)"></image>
				</view>
				<view class="page__content--card-bottom">
					<view class="page__content--card-bottom-tag" v-if="item.tag">
						<u-tag :text="item.tag" plain size="mini" color="#aaa" borderColor="#aaa"></u-tag>
					</view>
					<view class="page__content--card-bottom-title">{{item.name}}</view>
					<view class="page__content--card-bottom-content">{{item.content}}</view>
					<view class="page__content--card-bottom-datetime">{{item.upriqi}}</view>
					<view class="page__content--card-bottom-btn">
						<view class="">
							<image src="@/static/theme/default/home/sc.png" mode="" @click="del(item)" v-show="item.isEdit && item.isself"></image> 
						</view>
						<view class="">
							<image src="@/static/theme/default/home/bq.png" mode="" @click="setTag(item)" v-show="item.isEdit && item.isself"></image>
						</view>
						<view class="">
							<image src="@/static/theme/default/home/bz.png" mode="" @click="remark(item)" v-show="item.isEdit && item.isself"></image>
						</view>
						<view class="">
							<image src="@/static/theme/default/home/zf.png" mode="" @click="addSubject(item)"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<no-data class="page__content" v-else></no-data>
		
		<u-popup class="bz-popup" :customStyle="{bottom: '100rpx'}" :show="bzVisible" :round="10" mode="bottom" @close="bzClose" @open="bzVisible = true">
			<view class="bz-box">
				<view class="bz-item" hover-class="clickable" v-for="(item,index) in bz" :key="index" @click="changeBz(item)">
					<view class="bz-item__left">{{item}}</view>
					<view class="bz-item__right">
						<u-button color="#2979ff" size="normal" text="删除" :customStyle="{height: '60rpx'}" @click="delBz(index)"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="tagVisible" :round="10" mode="center" @close="tagVisible = false" @open="tagVisible = true">
			<view class="tag-box">
				<view class="tag-box-title">最近使用的标签：</view>
				<view class="tag-box-total">
					<view class="" v-for="item in currentTags">
						<u-tag :text="item.tag" plain size="mini" color="#aaa" borderColor="#aaa" @click="changeTagVal(item)"></u-tag>
					</view>
				</view>
				<view class="tag-box-title">选择或输入标签：</view>
				<view class="tag-box-input">
					<u--input
					    placeholder="请输入标签"
					    v-model="tagVal"
						border="bottom"
					  ></u--input>
				</view> 
				<u-button color="#2979ff" size="normal" text="确认" :customStyle="{height: '60rpx'}" @click="confirmTag"></u-button>
			</view>
		</u-popup>
		<view class="foot" v-if="showInput">
			<chat-input ref="message_input" :adjustPosition="true" @send-message="send_remark" @collect-message="collect_msg" :leftVisible="true" :focus="isFocus" placeholder="备注"></chat-input>
		</view>
		<u-loading-page bg-color="#fff" :loading="loading"></u-loading-page>
	</view>
</template>

<script>
	import moment from 'moment'
	import { pathToBase64 } from '@/plugins/image-tools/index.js'
	import _data from '@/common/_data.js'
	import _custom from '@/common/_custom.js'
	import {formatImg} from '@/common/custom_util.js'
	import chatInput from '@/pages/push/circle/chat_input.vue';
	import NoData from '@/components/custom/no-data/no-data.vue'
	
	export default {
		components: {
			chatInput,NoData
		},
		data() {
			return {
				name: '',
				title: '',
				code: '',
				editdays: '',//可编辑天数
				maxcount: '',//最大上传数量
				calendarVisible: false,
				date: moment().format('YYYY-MM-DD'),
				selectDateTime: moment().format('YYYY-MM-DD'),
				dotList: [],
				uploadImgs: [],//上传后返回图片地址
				username: _data.localData('name'),
				list: [],
				listCopy: [],
				showInput: false,
				loading: false,
				bz: [],
				bzVisible: false,
				isFocus: true,
				tagVal: '',
				tagVisible: false,
				currentTags: [],
				tags: [],
				tagMode: true
			}
		},
		onLoad(option) {
			this.title = option.title;
			this.code = option.code;
			this.name = option.name;
			this.editdays = option.editdays;
			this.maxcount = option.maxcount;
			uni.setNavigationBarTitle({
			　　title: option.name
			})
			this.getDailyImages();
			this.getDailyDaysInMonth();
			this.getDailyDayTags();
		},
		computed: {
			datetime() {
				return moment(this.selectDateTime).format('YYYY.MM.DD')
			}
		},
		onNavigationBarButtonTap(e) {
			let that = this;
			if(e.index == 0) {//拍照
				let diff = moment().diff(that.date,'day');
				if(diff > (that.editdays*1)) {
					uni.showToast({
						title: "超出时间范围",
						icon: 'none'
					})
					return
				}
				let count = (that.maxcount*1) - that.listCopy.length;
				uni.chooseImage({
				    sizeType: ['compressed'],
					extension: ['png'],
					count: count,
				    success: (res)=> {
						let p = res.tempFiles.map(v => {
							return pathToBase64(v.path)
						})
						Promise.all(p).then(resultes => {
							let ps = resultes.map((item,index) => {
								return new Promise((resolve,reject) => {
									setTimeout(() => {
										uni.request({
											url: _data.data('http_upload_url'),
											data: {
												"code" : 1001,
												"token" : _data.localData('obs_token'),
												"APIname" : "WUNIIMG",
												"WaterMarkParam":[{}],
												"imgdata" : item
											},
											method: 'POST',
											dataType: 'json',
											success(res) {
												if(res.data.msgcode == 0){
													let path = res.data.dir + res.data.filename
													let img = formatImg(path)
													resolve({path,img})
												} else {
													reject()
												}
											},
											fail() {
												reject()
											}
										})
									},index*500)
								})
							})
							Promise.all(ps).then(r => {
								that.uploadImgs = r;
								let temps = [];
								r.forEach(value => {
									let fileExtension = value.path.split('.').pop().toLowerCase();
									temps.push({
										obsdate: moment(that.date).format('YYYY-MM-DD'),
										obsusername: that.username,
										code: that.code,
										title: that.title,
										content: "",
										extname: fileExtension,
										filepath: value.path
									})
								})
								_custom.getDataJava({
									apiname: 'addDailyImages',
									"code": 13,
									apiparam: temps,
									success(response) {
										uni.showToast({
											title: '上传成功',
											icon: 'success'
										})
										that.getDailyImages();
									}
								})
							}).catch(e => {
								uni.showToast({
									title: '上传接口出错啦(●ˇ∀ˇ●)',
									icon: 'error'
								})
							})
						  })
						.catch(error => {})
				    }
				});
			} else if(e.index == 1) {
				uni.navigateTo({
					url: './subject-list?code=' + this.code
				})
			}
		},
		methods: {
			//点击日期
			changeDate(v) {
				this.selectDateTime = v.fullDate;
				this.date = v.fullDate;
				this.getDailyImages();
				uni.pageScrollTo({
					scrollTop: 0,
					selector: '.page__content',
					duration: 0
				});
				this.calendarVisible = false;
			},
			changeMonth(v) {
				//滑动切换月份
				if(v.type == 'swiper') {
					this.date = moment(v.start).format('YYYY-MM-DD');
					this.getDailyDaysInMonth();
				}
			},
			//按日期获取图片
			getDailyImages(fn) {
				let that = this;
				_custom.getDataJava({
					apiname: 'getDailyImages',
					apiparam: {
						code: this.code,
						obsdate: this.date
					},
					success(res) {
						res.forEach(v => {
							v.img = formatImg(v.filepath,false)
							let diff = moment().diff(that.date,'day');
							v.isEdit = diff <= (that.editdays*1);
							v.isself = v.myuser == that.username ? true : false;
						})
						that.list = res;
						that.listCopy = res;
						setTimeout(() => {
							that.loading = false;
						},1000)
					}
				})
			},
			getDailyDayTags() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getDailyDayTags',
					apiparam: {
						code: this.code,
						obsdate: this.date
					},
					success(res) {
						that.tags = res;
						that.tags.unshift({tags: '全部',checked: true})
					}
				})
			},
			del(v) {
				let that = this;
				uni.showModal({
					content: '确认删除?',
					success: function (res) {
						if (res.confirm) {
							_custom.getDataJava({
								apiname: 'flagDelDailyImage',
								code: 2,
								apiparam: {
									code: that.code,
									id: v.id
								},
								success(res) {
									uni.showToast({
										title: '删除成功',
										icon: 'none'
									})
									that.getDailyImages();
									that.getDailyDayTags();
								}
							})
						}
					}
				});
			},
			changeBz(v) {
				this.isFocus = false;
				this.$nextTick(() => {
					this.isFocus = true;
					this.$refs.message_input.setValue(v);
				})
			},
			delBz(i) {
				let bz = _data.localData(this.code + 'daily-bz').length ? _data.localData(this.code + 'daily-bz') : [];
				bz.splice(i,1)
				_data.localData(this.code + 'daily-bz',bz);
				this.bz = _data.localData(this.code + 'daily-bz').length ? _data.localData(this.code + 'daily-bz') : [];
			},
			remark(v) {
				this.showInput = true;
				this.bzVisible = true;
				this.temp = v;
				this.bz = _data.localData(this.code + 'daily-bz').length ? _data.localData(this.code + 'daily-bz') : [];
				this.$nextTick(() => {
					this.$refs.message_input.setValue(v.content);
				})
			},
			setTag(v) {
				let that = this;
				this.tagVisible = true
				this.temp = v;
				this.tagVal = v.tag;
				_custom.getDataJava({
					apiname: 'getDailyUserCurrentTags',
					apiparam: {
						code: that.code,
						obsusername: that.username
					},
					success(res) {
						console.log(res)
						that.currentTags = res
					}
				})
			},
			addSubject(v) {
				uni.navigateTo({
					url: './to-subject?data=' + JSON.stringify(v) + '&list=' + JSON.stringify(this.listCopy) + '&code=' + this.code
				})
			},
			bzClose() {
				this.bzVisible = false;
				setTimeout(() => {
					this.showInput = false;
				},500)
			},
			collect_msg(v) {
				this.isFocus = false;
				this.$nextTick(() => {
					this.isFocus = true;
				})
				let bz = _data.localData(this.code + 'daily-bz').length ? _data.localData(this.code + 'daily-bz') : [];
				if(bz.length > 5) {
					uni.showToast({
						title: '已达到最大词条数，请先删除',
						icon: 'none'
					})
					return
				}
				if(bz.indexOf(v) != -1) {
					uni.showToast({
						title: '该词条已存在',
						icon: 'none'
					})
					return
				}
				bz.push(v)
				_data.localData(this.code + 'daily-bz',bz);
				this.bz = bz;
			},
			send_remark(v) {
				let that = this;
				this.bzClose();
				_custom.getDataJava({
					apiname: 'updateDailyImageContent',
					code: 2,
					apiparam: {
						code: that.code,
						id: that.temp.id,
						content: v
					},
					success(res) {
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						})
						that.getDailyImages();
					},
					complete() {
						that.showInput = false;
					}
				})
			},
			getDailyDaysInMonth() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getDailyDaysInMonth',
					apiparam: {
						code: this.code,
						month: moment(this.date).format('YYYY-MM')
					},
					success(res) {
						let temp = []
						res.forEach(v => {
							temp.push({
								date: moment(v.date).format('YYYY-MM-DD'),
								colors: ['#3C9CFF']
							})
						})
						that.dotList = temp;
					}
				})
			},
			previewImg(i) {
				uni.hideKeyboard();
				let imgs = this.listCopy.map(item => {
					return item.img
				})
				uni.previewImage({
					current: i,
					urls: imgs
				});
			},
			changeTagVal(v) {
				this.tagVal = v.tag;
			},
			confirmTag() {
				let that = this;
				if(!this.tagVal.length) {
					uni.showToast({
						title: '标签不能为空',
						icon: 'none'
					})
					return
				}
				if(this.tagVal.length > 10) {
					this.tagVal = this.tagVal.substring(0,10) + '...'
				}
				_custom.getDataJava({
					apiname: 'updateDailyImageTag',
					code: 2,
					apiparam: {
						id: this.temp.id,
						code: this.code,
						tag: this.tagVal
					},
					success(res) {
						uni.showToast({
							title: '标签设置成功',
							icon: 'none'
						})
						that.getDailyImages();
						that.getDailyDayTags();
						that.tagVisible = false;
					}
				})
			},
			selectDate() {
				this.getDailyDaysInMonth();
				this.calendarVisible = !this.calendarVisible;
				if(this.calendarVisible) {
					this.$nextTick(() => {
						this.$refs.zzx_calendar.selecteDate(this.selectDateTime);
					})
				}
			},
			selectPrevDate() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getDailyFrontDate',
					apiparam: {
						code: this.code,
						obsdate: this.date
					},
					success(res) {
						let nextDate = res.length ? res[0].date : '';
						if(nextDate) {
							that.loading = true;
							that.selectDateTime = nextDate;
							that.date = nextDate;
							that.getDailyImages();
							uni.pageScrollTo({
								scrollTop: 0,
								selector: '.page__content',
								duration: 0
							});
						} else {
							uni.showToast({
								title: '无更多数据',
								icon: 'none'
							})
						}
					}
				})
			},
			selectNextDate() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getDailyAfterDate',
					apiparam: {
						code: this.code,
						obsdate: this.date
					},
					success(res) {
						let prevDate = res.length ? res[0].date : '';
						if(prevDate) {
							that.loading = true;
							that.selectDateTime = prevDate;
							that.date = prevDate;
							that.getDailyImages();
							uni.pageScrollTo({
								scrollTop: 0,
								selector: '.page__content',
								duration: 0
							});
						} else {
							uni.showToast({
								title: '无更多数据',
								icon: 'none'
							})
						}
					}
				})
			},
			tagFilter(v) {
				this.tags.map((item, index) => {
					item.checked = item.tags === v ? true : false
				})
				if(v == '全部') {
					this.listCopy = this.list;
					return
				}
				this.listCopy = this.list.filter(item => {
					return item.tag == v
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.calendar-box {
		position: fixed;
		top: 100rpx;
		right: 10rpx;
		/* #ifdef H5 */
		top: 188rpx;
		/* #endif */
		width: 730rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		box-sizing: border-box;
	}
	
	.page {
		&__header {
			height: 200rpx;
			position: fixed;
			width: 100%;
			top: 0;
			/* #ifdef H5 */
			top: 88rpx;
			/* #endif */
			z-index: 999;
			background-image: linear-gradient(to right, #6AD7F8,#10AADC);
			transition: all .2s ease-in-out;
			
			&-top {
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20rpx;
				box-sizing: border-box;
				&--center {
					height: 100%;
					display: flex;
					align-items: center;
					&-icon {
						margin-left: 5rpx;
						width: 40rpx;
						height: 40rpx;
						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
			
			&-bottom {
				height: 100rpx;
				display: flex;
				align-items: center;
				overflow-x: scroll;
				transition: all .2s ease-in-out;
				
				view {
					margin: 0 10rpx;
				}
			}
		}
		&__content {
			background-color: #fff;
			padding-top: 200rpx; 
			&--card {
				padding: 20rpx;
				margin: 30rpx 10rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #eee;
				&-img {
					height: 400rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
			&--card-bottom {
				position: relative;
				&-tag {
					height: 80rpx;
					position: relative;
					top: 30rpx;
					left: 0; 
					display: flex;
				}
				&-title {
					height: 80rpx;
					font-size: 30rpx;
					font-weight: bold;
					line-height: 80rpx;
				}
				&-content {
					width: 100%;
					word-break: break-word;
				}
				&-datetime {
					color: #aaa;
					font-size: 25rpx;
					margin-top: 40rpx;
				}
				&-btn {
					position: absolute;
					right: 0;
					bottom: -5rpx; 
					width: 330rpx;
					height: 70rpx;
					display: flex;
					font-size: 30rpx;
					// background-color: #aaa;
					color: #fff;
					border-radius: 40rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					view {
						flex: 1;
						text-align: center;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						
						image {
							width: 35rpx;
							height: 35rpx;
						}
					}
					
				}
			}
		}
	}
	
	.bz-popup {//需要写在弹窗class下
		.bz-box {
			width: 100%; 
		}
		
		.bz-item {
			width: 100% ;
			height: 100rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			font-size: 25rpx;
			border-bottom: 1rpx solid #eee;
			display: flex; 
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			
			&__left {
				flex: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			&__right {
				width: 100rpx;
			}
		}
	}
	
	.tag-box {
		width: 600rpx;
		padding: 10rpx;
		
		&-title {
			height: 60rpx;
			font-size: 25rpx;
			line-height: 60rpx;
		}
		
		&-input {
			margin: 20rpx 0;
			border-bottom: 1rpx solid #eee;
		}
		
		&-total {
			display: flex;
			min-height: 100rpx;
			align-items: center;
			flex-wrap: wrap;
			
			view {
				margin-right: 10rpx;
				margin-top: 10rpx;
			}
		}
	}
	
	.tag-change {
		position: absolute;
		bottom: -60rpx; 
		left: 50%;
		transform: translateX(-50%);
		z-index: 999999; 
		display: flex;
		justify-content: center;
		width: 100%;
		height: 60rpx;
		align-items: center;
		
		.mode-arrow-top {
			width: 0;
			height:0;
			border: 12rpx solid;
			border-color: transparent transparent #999 transparent ;
			position: relative;
		}
		.mode-arrow-top::after {
			content: '';
			position: absolute;
			top: -10rpx;
			left: -12rpx;
			border: 12rpx solid;
			border-color:  transparent transparent #999 transparent;
		}
		.mode-arrow-bottom {
			width: 0;
			height:0;
			border: 12rpx solid;
			border-color: #999 transparent transparent transparent;
			position: relative;
		}
		.mode-arrow-bottom::after {
			content: '';
			position: absolute;
			top: -10rpx; 
			left: -12rpx;
			border: 12rpx solid;
			border-color: #999 transparent transparent transparent;
		}
	}
	
	.foot {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 999999;
	}
</style>
